<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    :label-position="'top'"
  >
    <el-form-item>
      <span slot="label">故障种类配置 <br> <span style="color:#808080;font-size:12px">多个故障种类用英文逗号分隔</span></span>
      <el-input
        type="textarea"
        v-model="system_deviceCategory.fault.faultType"
        :disabled="!isEdit"
        placeholder="多个故障种类用英文逗号分隔"
        maxlength="200"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <span slot="label">故障级别配置 <br> <span style="color:#808080;font-size:12px">多个故障级别用英文逗号分隔</span></span>
      <el-input
        type="textarea"
        v-model="system_deviceCategory.fault.faultLevel"
        :disabled="!isEdit"
        placeholder="多个故障级别用英文逗号分隔"
        maxlength="200"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        v-if="!isEdit"
        type="primary"
        @click="
          () => {
            isEdit = true;
          }
        "
      >编辑</el-button>
      <el-button
        v-if="isEdit"
        type="primary"
        @click="onSubmit"
      >保存</el-button>
      <el-button
        v-if="isEdit"
        @click="onCancel"
      >取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isEdit: false,
      form: {
        faultType: "",
        faultLevel: ""
      }
    };
  },
  mounted() {
    this.$store.dispatch("system_deviceCategory/requestFault");
  },
  computed: {
    ...mapState(["system_deviceCategory", "app"])
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      this.$store
        .dispatch("system_deviceCategory/saveTroubleInfo")
        .then(res => {
          this.isEdit = false;
        });
    },
    onCancel() {
      console.log("++++cancel+++");
      this.$store.dispatch("system_deviceCategory/requestFault");
      this.isEdit = false;
    }
  }
};
</script>
